<template>
	<!-- 签订合同 -->
	<view class="main-all">
		<view class="main-head">
			<view class="head-content">
			    <view>合同名称</view>
			    <view class="content-input"> <input v-model="contractName"  /></view>
			</view>
			<view class="head-content">
			    <view>合同范本</view>
			    <view class="content-input download" v-model="model"> 点击下载合同范本</view>
			</view>
			<view class="head-content">
			    <view>订单单价</view>
			    <view class="content-input"> <input v-model="dddj"  /></view>
			</view>
			<view class="head-content">
			    <view>合同总价</view>
			    <view class="content-input"> <input v-model="htprice"  /></view>
			</view>
			<change-picture v-on:picpost="getpic"></change-picture>
		</view>
		<view class="view-button" @click="gettoht()">
			确认签订
		</view>
	</view>
</template>

<script>
	import changePicture from "@/components/change-picture/change-picture.vue";
	import adFile from '@/components/ad-file/ad-file.vue';   
	import { secondUploadContract} from '@/service/getData.js';
	import { router, toast } from '@/common/util.js';
	import { mapState, mapActions, mapMutations } from 'vuex';
	export default{
		components:{
			changePicture
		},
		computed: mapState(['userInfo', 'hasLogin']),
		data() {
			return {
				contractName: '航次租船合同', // 搜索的值
				model: '',
				dddj:'12', // 单价
				htprice: '12345', //总价
				outharbor:'合同文件',
				htfile:['','','','',''],  //合同文件地址
				orderid: '',
				ordercode: '',
			}
		},
		onLoad(options){
			var that = this;
			uni.getStorage({
			    key: 'htinfo',
			    success: function (res) {
			        console.log(res.data.orderid);
					that.orderid = res.data.orderid;
					that.ordercode = res.data.ordercode;
					that.dddj = res.data.dddj;
					that.htprice = res.data.htprice;
			    }
			});
		},
		methods:{
			getpic(pic){
				this.htfile = pic;
				console.log(this.htfile);
			},
			//确认签订合同
			gettoht(){
				let sent ={
					"type":"orderact",
					"acttype":"2" ,
					"ordertype": "2",
					"orderid":this.orderid,
					"ordercode":this.ordercode,
					"usertype":"乙方",
					"fendan": "0",  //暂时填0   0未分单  1分单
					"fendancode": "0",  //未分单传0
					"htfile":this.htfile,
					"htprice":this.htprice,
					"uid":this.userInfo.uid,
					"uname":this.userInfo.uname
				}
				console.log(sent);
				toast.loading();
				secondUploadContract({data:sent}).then(res => {
					toast.hideLoading();
					console.log(res);
					if(res.data == ''){
						toast.show("合同签订失败！");
					}else{
						var tem = eval('('+res.data+')');
						if(tem[0].stat == '1'){
							toast.show("合同签订成功！");
						}
					}
					router.navigateBack();
				})
				
			}
		}
		
	}
</script>

<style lang="scss">
	 @import '@/style/page/card.scss';
	 .page{
	     padding: 0 0 44px;
	 }
	 .idcard{
	     @include flex(between);
	     
	     &__cell{
	         width: 320upx;
	     }
	     
	     &__img{
	         position: relative;
	         width: 308upx;
	         height: 228upx;
	         border-radius: $uni-border-radius-sm;
	         margin-bottom: $uni-spacing-col-sm;
	         border: 1px dashed $uni-border-color;
	     }
	     
	     &__picture{
	         position: absolute;
	         top: 0;
	         left: 0;
	         display: block;
	         width: 308upx;
	         height: 228upx;
	         
	         &--left{
	             width: 228upx;
	             height: 308upx;
	             transform-origin: top left;
	             transform: rotate(90deg) translateY(-308upx);
	         }
	     }
	     
	     &__close{
	         position: absolute;
	         top: $uni-spacing-col-sm;
	         right: $uni-spacing-row-sm;
	         z-index: 999;
	     }
	     
	     &__txt{
	         text-align: center;
	         font-size: $uni-font-size-sm;
	         color: $uni-text-color-grey;
	     }
	     
	     .card__center{
	         @include flex(center, center);
	     }
	 }
	 
	 .card__foot{
	     position: relative;
	     
	     &::before{
	         @include hr(top, $uni-spacing-row-base);
	     }
	 }
	 
	 .checked{
	     @include flex(null, center);
	     padding: 0 $uni-spacing-row-base;
	     
	     &__field{
	         @include flex(null, center);
	         height: 88rpx;
	     }
	 }
	 
	 .link{
	     color: $color-sub;
	 }
	.main-all{
		margin: 0;
		padding: 0;
		width: 100%;
		.main-head{
			padding: 10upx 0;
			color: #5d5d5d;
			background-color: #ffffff;
			.head-content{
				display: flex;
				flex-direction: row;
				padding: 24upx 0;
				border-bottom: 1upx solid #dcdcdc;
				view:nth-child(1){
					font-size: 30upx;
					width: 22%;
					text-align: right;
				}
				.content-input{
					width: 78%;
					text-align: right;
					padding: 0 30upx;
					input{
						font-size: 30upx;
					}
				}
				.download{
					color: #ffffff;
					background-color: #2587ff;
					border: 1upx solid #2587ff;
					border-radius: 10upx;
					width: 30%;
					padding: 10upx;
					position: absolute;
					right: 20upx;
					margin-top: -8upx;
				}
			}
		}
		.view-button{
			color: #ffffff;
			background-color: #2587ff;
			font-size: 30upx;
			border: 1upx solid #2587ff;
			border-radius: 10upx;
			padding: 30upx;
			text-align: center;
			margin: 30upx;
		}
		
	}
</style>
